<template>
    <main-wrap>
        <template v-slot:header>
            <Header :title="detailType==2?'拍卖结果':'支付结果'"/>
        </template>
        <div class="rstbox">
            <img src="/images/prt1.png" alt="">
            <h2>{{detailType==2?'拍卖':'付款'}}成功</h2>
            <p v-if="detailType!=2">恭喜您获得积分  <span>100</span></p>
            <div class="btnBox">
                <div class="bitem"><my-button text="返回首页" @click="goAppPage"/></div>
                <div class="bitem">
                    <my-button v-if="detailType==2" text="我的拍卖" @click="goPage('/home/auction')"/>
                    <my-button v-else text="查看订单" @click="goPage('/home/order')"/>
                </div>
            </div>
        </div>
    </main-wrap>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import Header from '@/components/header.vue'
import myButton from '@/components/myButton.vue'
import {H5CallAPPFuction} from '@/utils/common'
export default {
    components:{
       mainWrap,
       Header,
       myButton
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            detailType:computed(()=>store.state.arApi.detailType),  // 1为直卖商品详情，2为拍卖详情
        })
        const goPage = path =>{
            router.replace(path)
        }
        const goAppPage = ()=>{
            try {
                H5CallAPPFuction('backToHome','1')   // 调用app方法处理返回
            } catch (error) {
                router.replace('/collection')
            } 
        }

        return{
            ...toRefs(state),
            goPage,
            goAppPage
        }
    }
}
</script>

<style lang="scss" scoped>
    .rstbox{
        padding: 160px 0 0 0;
        text-align: center;
        img{
            display: block;
            margin: 0 auto;
            width: 200px;
            height: 200px;
        }
        h2{
            font-size: 50px;
            font-weight: 500;
            padding: 50px 0 0 0;
            color: var(--baseColor);
        }
        p{
            padding: 30px 0 0 0;
            span{
                color: var(--baseColor);
            }
        }
        .btnBox{
            display: flex;
            padding:60px 50px;
            .bitem{
                flex: 1;
                padding:0 40px;
            }
        }
    }
</style>